<template>
    <el-select
        v-model="selectedPlan"
        filterable
        remote
        clearable
        :remote-method="getPlanList"
        placeholder="请选择预案"
        @change="handleChange"
        :disabled="disable"
    >
        <el-option
            v-for="item in planList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
        />
    </el-select>
</template>

<script setup>
// 定义传入组件的属性
import {getUnitPlanList} from "@/api/PlanManage/Plan.js";

const props = defineProps({
    modelValue: {
        type: [String, Number],
        default: null,
    }
});

const planList = ref({})
const disable = ref(true)
const emit = defineEmits(['update:modelValue', 'planDetail']);
const selectedPlan = ref(props.modelValue);
const personnelId = ref('')

// 双向绑定 - 监听 modelValue 变化
watch(() => props.modelValue, (newVal) => {
    selectedPlan.value = newVal;
});

// 监听数据加载情况，加载完成后再设置默认值
watch(planList, (newList) => {
    if (newList.length > 0 && props.modelValue) {
        selectedPlan.value = props.modelValue;
    }
});


// 获取预案列表
const getPlanList = async (keyword = '') => {
    const res = await getUnitPlanList({
        planname: keyword,
        plantype: '2',
        peopleId: personnelId.value
    });

    disable.value = !res.rows.length >= 1;

    planList.value = res.rows.map(item => {
        return {
            label: item.planname,
            value: item.planId
        }
    })
}

const listenHasPersonnelId = (id) => {
    console.log('320506200007284816', id)
    personnelId.value = id
    getPlanList()
}
defineExpose({listenHasPersonnelId})
// getPlanList()
const handleChange = (value) => {
    emit('update:modelValue', value);
    emit('planDetail', value)
}
</script>

<style scoped lang="scss">

</style>